<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- saved from url=(0019)http://guajibao.me/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>不关机的云端电脑</title>
    <link rel="icon" type="image/x-icon" mce_href="/favicon.ico" href="image/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-docs.min.css">
    <!--[if lt IE 8]>
    <link rel="stylesheet" href="css/bootstrap-ie7.css">
    <![endif]-->

    <link rel="stylesheet" href="bootstrap/plugin/bootstrap3-dialog/css/bootstrap-dialog.min.css
    "/>
    <link rel="stylesheet" href="bootstrap/plugin/datetimepicker/css/bootstrap-datetimepicker.min.css"/>
    <style>
        .bootstrap-select {
            width: 100% !important;
        }
    </style>

    <link rel="stylesheet" href="bootstrap/plugin/bootstrap-select/css/bootstrap-select.min.css"/>
    <script src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <![endif]-->
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="bootstrap/plugin/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>

    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/jquery-dataTables/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/bootstrap-waitingfor/bootstrap-waitingfor.js"></script>
    <script type="text/javascript"
            src="bootstrap/plugin/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="bootstrap/plugin/ajaxSelect/js/ajax-bootstrap-select.js"></script>

    <script type="text/javascript" src="bootstrap/plugin/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="bootstrap/plugin/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/date.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $('#example').DataTable({
                "bPaginate": false
            });
            $('.selectpicker').selectpicker();

            var renewRecordVpsFrom = document.getElementById("renewRecordVpsFrom");
            renewRecordVpsFrom.noValidate = true;

            var form = document.getElementById("recordVpsFrom");
            form.noValidate = true;

// set handler to validate the form
// onsubmit used for easier cross-browser compatibility
//            form.onsubmit = validateForm;

            /**
             *续费
             */
            $("#renewRecordVpsFrom").submit(function (event) {


                event.preventDefault();
                event.stopPropagation();


                var email = $("#renewUser").val();
                var vps = $("#renewVpsName").val();

                var expireTime = $("#renewExpireTime").val();

                var rmb = $("#renewRmb").val();

//
                if (!email) {
                    alert("请选择用户");
                    return;
                }
                if (!vps) {
                    alert("请选择vps");

                    return;
                }
                if (!rmb) {
                    alert("请填写金额");
                    return;
                }
                if (!expireTime) {
                    alert("请选择vps到期时间");
                    return;
                }

                waitingDialog.show('操作中,请稍后...', {dialogSize: 'sm', progressType: 'wanring'});

                 dismissDialog();

                var url = "/doRenewVps"; // the script where you handle the form input.
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $("#renewRecordVpsFrom").serialize() + "&userEmail=" + email + "&vps=" + vps + "&expireTime" + expireTime, // serializes the form's elements.
                    success: function (data) {
                        waitingDialog.hide();
                        if (data.succ) {

                            BootstrapDialog.show({
                                title: '温馨提示',
                                message: '续费成功',
                                closable: false,
                                buttons: [{
                                    label: 'OK',
                                    action: function (dialog) {
                                        location.reload(true);
                                    }
                                }]
                            });
                        }
                        else {

                            BootstrapDialog.show({
                                title: '温馨提示',
                                message: data.msg,
                                closable: false,
                                type: BootstrapDialog.TYPE_DANGER,
                                buttons: [{
                                    label: 'OK',
                                    action: function (dialogItself) {
                                        dialogItself.close();
                                    }
                                }
                                ]
                            });
                        }
                    }
                });

                return false; // avoid to execute the actual submit of the form.
            });


            $("#recordVpsFrom").submit(function (event) {


                event.preventDefault();
                event.stopPropagation();

                //      var result = $('#recordVpsFrom')[0].checkValidity() // returns true/false


                var email = $("#ajax-select-user").val();
                var vps = $("#vpsName").val();
//
                var expireTime = $("#expireTime").val();
                ;
                var rmb = $("#rmb").val();
                ;
//
                if (!email) {
                    alert("请选择用户");
                    return;
                }
                if (!vps) {
                    alert("请选择vps");
                    return;
                }
                if (!rmb) {
                    alert("请填写金额");
                    return;
                }
                if (!expireTime) {
                    alert("请选择vps到期时间");
                    return;
                }

                waitingDialog.show('操作中,请稍后...', {dialogSize: 'sm', progressType: 'wanring'});
                dismissDialog();


                var url = "/doRecordVps"; // the script where you handle the form input.
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $("#recordVpsFrom").serialize() + "&userEmail=" + email + "&vps=" + vps + "&expireTime" + expireTime, // serializes the form's elements.
                    success: function (data) {
                        waitingDialog.hide();
                        if (data.succ) {
                            BootstrapDialog.show({
                                title: '温馨提示',
                                message: '登记成功,需要继续登记吗?',
                                closable: false,
                                buttons: [{
                                    label: '返回个人中心',
                                    action: function (dialog) {
                                        window.location = "/";
                                    }
                                }, {
                                    label: '继续登记',
                                    cssClass: 'btn-primary',
                                    action: function (dialog) {
                                        //   dialog.close();
                                        location.reload(true);
                                    }
                                }]
                            });
                        }
                        else {

                            BootstrapDialog.show({
                                title: '温馨提示',
                                message: data.msg,
                                closable: false,
                                type: BootstrapDialog.TYPE_DANGER,
                                buttons: [{
                                    label: 'OK',
                                    action: function (dialogItself) {
                                        dialogItself.close();
                                    }
                                }
                                ]
                            });
                        }
                    }
                });

                return false; // avoid to execute the actual submit of the form.
            });


        });




        function dismissDialog() {
            $('#myModal').modal('hide');
            $('#renewModal').modal('hide');
        }
        function goRecordVps() {
            $("#recordVpsFrom").submit();
        }
        function goRenewUserVps() {
            $("#renewRecordVpsFrom").submit();
        }
    </script>
    <script type="text/javascript">
        // A $( document ).ready() block.
        $(document).ready(function () {
            var optionsUser = {
                ajax: {
                    url: '/getUserByFilter',
                    type: 'POST',
                    dataType: 'json',
                    // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
                    // automatically replace it with the value of the search query.
                    data: {
                        keyWord: '{{{q}}}'
                    }
                },
                locale: {
                    emptyTitle: '选择用户',
                    searchPlaceholder: "搜索",
                    statusNoResults: '没有相关数据',
                    statusInitialized: "根据用户登陆账号<span style='color:red;font-size: large'>邮箱</span>进行搜索"
                },
                log: 3,
                preprocessData: function (data) {
                    console.log(">>>>>>>>>>>data:" + data);
                    var i, l = data.length, array = [];
                    if (l) {
                        for (i = 0; i < l; i++) {
                            array.push($.extend(true, data[i], {
                                text: data[i].nickname,
                                value: data[i].email,
                                data: {
                                    subtext: data[i].email
                                }
                            }));
                        }
                    }
                    console.log("array:" + array);
                    // You must always return a valid array when processing data. The
                    // data argument passed is a clone and cannot be modified directly.
                }
            };

            $("#ajax-select-user").selectpicker().filter('.with-ajax').ajaxSelectPicker(optionsUser);
        });
        var recordVps = function (vpsName, vpsId,type) {

            $('#recordVpsFrom')[0].reset();

            if (!!vpsName) {
                $("#vpsName").val(vpsName);
                $("#buyVpsId").val(vpsId);

            }
            $("#buyType").val(type);
            if(type==1){
                document.getElementById("myModalLabel").innerHTML="分配VPS(试用最长2小时)";
                document.getElementById("ajax-select-buy-unit").selectedIndex=0;
                document.getElementById("ajax-select-buy-unit").disabled=true;
                $('.selectpicker').selectpicker('refresh');
            }else{
                document.getElementById("myModalLabel").innerHTML="分配VPS(出租)";
                document.getElementById("ajax-select-buy-unit").selectedIndex=1;
                document.getElementById("ajax-select-buy-unit").disabled=false;
                $('.selectpicker').selectpicker('refresh');
            }
            $('#myModal').modal('show');
            $('#myModal').on('shown.bs.modal', function () {
                $('#myInput').focus();
            });
            var $startDate = $("#startDate");
            today = new Date();
            var dateString = today.format("yyyy年mm月dd日 HH时MM分ss秒");
            $startDate.val(dateString);
        }

        $("#ajax-select-buy-unit").change(function () {
            calBuyTime();
        });
        var calBuyTime = function () {
            var $buyDays = $("#buyDays");
            var $buyUnit = $("#ajax-select-buy-unit");
            var $buyType = $("#buyType");

            if (!$buyDays.val()) {
                $("#expireTime").val("");
                return;
            }
            if ($buyDays.val() == "0") {
                return;
            }
            if($buyType.val()=="1"){
                if ($buyDays.val() > "2") {
                    alert("最长试用时间为2小时");
                    $buyDays.val("");
                }
            }
            var now = new Date();
            var nowTimeStamp = now.getTime();
            if ($buyUnit.val() == "小时") {
                nowTimeStamp = nowTimeStamp + $buyDays.val() * 60 * 60 * 1000;
            } else if ($buyUnit.val() == "日") {
                nowTimeStamp = nowTimeStamp + $buyDays.val() * 24 * 60 * 60 * 1000;
            } else {
                nowTimeStamp = nowTimeStamp + $buyDays.val() * 24 * 60 * 60 * 1000 * 30;
            }
            var newDate = new Date(nowTimeStamp);
            var dateString = newDate.format("yyyy年mm月dd日 HH时MM分ss秒");

            $("#expireTime").val(dateString);

        }

        var renewCalBuyTime = function () {
            var $buyDays = $("#renewBuyDays");
            var $buyUnit = $("#renew-ajax-select-buy-unit");
            if (!$buyDays.val()) {
                $("#renewExpireTime").val("");
                return;
            }
            if ($buyDays.val() == "0") {
                return;
            }
            var now = new Date();
            var nowTimeStamp = now.getTime();
            if ($buyUnit.val() == "小时") {
                nowTimeStamp = nowTimeStamp + $buyDays.val() * 60 * 60 * 1000;
            } else if ($buyUnit.val() == "日") {
                nowTimeStamp = nowTimeStamp + $buyDays.val() * 24 * 60 * 60 * 1000;
            } else {
                nowTimeStamp = nowTimeStamp + $buyDays.val() * 24 * 60 * 60 * 1000 * 30;
            }
            var newDate = new Date(nowTimeStamp);
            var dateString = newDate.format("yyyy年mm月dd日 HH时MM分ss秒");

            $("#renewExpireTime").val(dateString);

        }
        /**
         * 续费
         * @param vpsId
         */
        var renewUserVps = function (userVpsId) {

            $('#renewRecordVpsFrom')[0].reset();
            $.ajax({
                type: 'POST',
                url: "/getUserVps",
                data: {userVpsId: userVpsId},
                success: function (result) {
                    $("#renewUser").val(result.user.email);
                    $("#userVpsId").val(userVpsId);
                    $("#renewVpsName").val(result.vps.vmName);

                    var $renewStartDate = $("#renewStartDate");
                    var $renewExpireTime = $("#renewExpireTime");

                    var startTime = new Date(result.createTime);
                    var expireTime = new Date(result.expireTime);

                    var startTimeString = startTime.format("yyyy年mm月dd日 HH时MM分ss秒");
                    var expireTimeString = expireTime.format("yyyy年mm月dd日 HH时MM分ss秒");

                    $renewStartDate.val(startTimeString);
                    $renewExpireTime.val(expireTimeString);


                    $('#renewModal').modal('show');


                },
                error: function (result) {

                }

            });


        }
    </script>
</head>

<body data-spy="scroll" data-target="#myScrollspy">

<div>
    <nav class="navbar-l1 navbar-default navbar-static-top" role="navigation" style="background-color:#008eb7;"
         onmouseover="javascript:$('#navbar-brand').css('color','#fff');"
         onmouseout="javascript:$('#navbar-brand').css('color','#00a2ca');">
        <div class="container-fluid">
            <div class="navbar-header">
                <a id="navbar-brand" class="navbar-brand" style="" href="/">vpsb2c.com</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="" href="/profile" title="当前用户：jiaoming42">您好，${loginedUser.nickname}</a></li>
                    <li></li>
                    <li></li>
                    <li><a style="" href="/logout" title="退出系统"><span
                            class="glyphicon glyphicon-log-out"></span>退出系统</a></li>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <nav class="navbar-l2 navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-navbar-collapse-2"><span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
                <ul class="nav navbar-nav">
                    <c:choose>
                        <c:when test="${loginedUser.role == 0}">
                            <li class="active"><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                        </c:when>
                        <c:otherwise>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/">我的</a></li>
                            <%--<li><a style="padding-left:20px;padding-right:20px;"--%>
                            <%--href="/recordVps">VPS登记</a></li>--%>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/userList">用户列表</a></li>
                            <li class="active"><a style="padding-left:20px;padding-right:20px;" href="/hostList">主机</a>
                            </li>
                            <li><a style="padding-left:20px;padding-right:20px;" href="/income">流水</a></li>
                            <c:if test="${loginedUser.role == 2}">
                                <li><a style="padding-left:20px;padding-right:20px;" href="/admin">设置管理员</a></li>
                            </c:if>
                        </c:otherwise>
                    </c:choose>


                </ul>
                <ul class="nav navbar-nav navbar-right" style="display: none">
                    <li class="dropdown ">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           title="Premium Bootstrap Themes &amp; Templates" aria-expanded="true"><i
                                class="fa fa-star text-yellow"></i> 任务 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li style="margin-top: 20px">
                                <a href="/bootstrap-design-services"><i class="fa fa-fw fa-paint-brush"></i>
                                    任务1: VPS[0001]正在重启...
                                </a>

                            </li>
                            <li style="margin-top: 20px">
                                <a href="https://wrapbootstrap.com/?ref=StartBootstrap"><i
                                        class="fa fa-fw fa-shopping-cart"></i> WrapBootstrap - Premium Bootstrap Themes</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">

        <div class="page-header">
            <h4>主机-${serverHost.hostname}-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                    style="color: blue;">${serverHost.ip}-${serverHost.remark}</span>
                <span style="padding-left: 200px">该主机共有${fn:length(serverHost.vpsSet)}台vps</span>
                <span>已出售<span style="color: blue">${hasSaleCount}</span>台</span>
                <span>剩余<span style="color: blue">${avaSaleCount}</span>台</span>
                <%--<button class="btn btn-small btn-primary" onclick="--%>
                <%--recordVps(18)"> VPS登记--%>
                <%--</button>--%>
            </h4>
        </div>
        <div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

            <div class="row">
                <div class="col-sm-12">
                    <table id="example" class="table table-striped table-bordered dataTable" cellspacing="0"
                           width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
                        <thead>
                        <tr role="row">

                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Position: activate to sort column ascending" style="width: 40px;">Vps名称
                            </th>
                            <%--<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"--%>
                            <%--aria-label="Office: activate to sort column ascending" style="width: 62px;">VpsIp地址--%>
                            <%--</th>--%>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">操作系统
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 50px;">购买人
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">购买金额
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">购买天数
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">剩余时间
                            </th>
                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">VPS状态
                            </th>

                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Office: activate to sort column ascending" style="width: 62px;">最后刷新时间
                            </th>

                            <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"
                                aria-label="Age: activate to sort column ascending" style="width: 100px;">操作
                            </th>

                        </tr>
                        </thead>

                        <tfoot>

                        </tfoot>

                        <tbody>
                        <c:forEach items="${userVpsVoList}" var="userVpsVo">

                            <tr role="row" class="odd">
                                <td class="sorting_1">${userVpsVo.vpsName}</td>
                                    <%--<td>${userVpsVo.ip}</td>--%>
                                <td>${userVpsVo.os}</td>
                                <td>${userVpsVo.email}</td>
                                <td>${userVpsVo.rmb}</td>
                                <td>${userVpsVo.buyDays}</td>
                                <td  style="background-color: ${userVpsVo.warningtStatus}" >


                                ${userVpsVo.leftTime}

                                </td>
                                <td id="${userVpsVo.vpsId}_vps_state">${userVpsVo.status}</td>

                                <td>${userVpsVo.statusLastRefreshTime}</td>
                                <td>
                                    <div id="${userVpsVo.vpsId}_command_div">
                                        <!-- Split button -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary">服务器租用</button>
                                            <button type="button" class="btn btn-primary dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="caret"></span>
                                                <span class="sr-only">服务器租用</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <c:choose>
                                                    <c:when test="${userVpsVo.userVpsId == -1}">
                                                        <li>
                                                            <a href="javascript:recordVps('${userVpsVo.vpsName}','${userVpsVo.vpsId}',0)">出租</a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:recordVps('${userVpsVo.vpsName}','${userVpsVo.vpsId}',1)">试用</a>
                                                        </li>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <c:choose>
                                                              <c:when test="${userVpsVo.leftTime == '过期'}">
                                                                  <li>
                                                                      <a href="javascript:initVPS('${userVpsVo.userVpsId}')">初始化</a>
                                                                  </li>
                                                              </c:when>

                                                            <c:otherwise>
                                                                <li><a href="javascript:disableUserVps(${userVpsVo.userVpsId})">停用</a>
                                                                </li>

                                                                <li role="separator" class="divider"></li>
                                                                <li>
                                                                    <a href='javascript:renewUserVps("${userVpsVo.userVpsId}",this)'>续费</a>
                                                                </li>
                                                            </c:otherwise>
                                                        </c:choose>

                                                       

                                                    </c:otherwise>
                                                </c:choose>


                                            </ul>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-danger">服务器操作</button>
                                            <button type="button" class="btn btn-danger dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="caret"></span>
                                                <span class="sr-only">服务器租用</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="javascript:vpsStart(${userVpsVo.vpsId})">开机</a></li>
                                                <li><a href="javascript:vpsPowerOff(${userVpsVo.vpsId})">关机</a></li>
                                                <li><a href="javascript:resetartVps(${userVpsVo.vpsId})">重启</a></li>
                                                <li role="separator" class="divider"></li>
                                                <%--<li><a href="javascript:createSnapshot(${userVpsVo.vpsId})">备份</a>--%>
                                                <li><a href="javascript:initVpsSnapshot(${userVpsVo.vpsId})">恢复系统</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div style="display: none" id="${userVpsVo.vpsId}_tip_div">
                                        <div class="row">
                                            <div class="col-sm-1">

                                            </div>
                                            <div class="col-sm-10 text-center">
                                                <h5 style="margin: 0px;" id="${userVpsVo.vpsId}_tip_div_text">
                                                    正在关机,请稍后...</h5>
                                            </div>

                                            <div class="col-sm-1">

                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-1">

                                            </div>
                                            <div class="col-sm-10">
                                                <div class="progress progress-striped active" style="margin-bottom:0;">
                                                    <div class="progress-bar progress-bar-warning"
                                                         style="width: 100%"></div>
                                                </div>
                                            </div>

                                            <div class="col-sm-1">

                                            </div>
                                        </div>
                                    </div>

                                </td>


                            </tr>

                        </c:forEach>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="bootstrap-dialog-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="dismissDialog()"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">分配VPS</h4>
                </div>

            </div>
            <div class="modal-body">
                <form id="recordVpsFrom" class="form-horizontal" role="form" method="post">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户：</label>

                        <div class="col-sm-8">
                            <select id="ajax-select-user" class="selectpicker with-ajax" data-live-search="true"
                                    title="选择用户">

                            </select>


                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">VPS：</label>

                        <div class="col-sm-8">
                            <input name="vpsName" value="" class="form-control" id="vpsName" readonly="readonly"
                                   required>
                            <input name="buyVpsId" id="buyVpsId" type="hidden">
                            <input name="buyType" id="buyType" type="hidden">

                            <%--<select id="ajax-select-vps" class="selectpicker with-ajax" data-live-search="true"--%>
                            <%--style="display: none;">--%>

                            <%--<option value="">请选择您要分配的vps</option>--%>

                            <%--<c:forEach items="${userVpsVoList}" var="userVpsVo">--%>
                            <%--<option value="${userVpsVo.vpsId}">${userVpsVo.vpsName}</option>--%>
                            <%--</c:forEach>--%>

                            <%--</select>--%>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">购买金额：</label>

                        <div class="col-sm-8">
                            <input type="number" name="rmb" value="" class="form-control" id="rmb" required="">
                            <input type="hidden" name="serverHostId" value="${param.serverHostId}" class="form-control"
                                   id="serverHostId" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">开通：</label>

                        <div class="col-sm-8">

                            <div class="row">
                                <div class="col-sm-6">
                                    <input type="number" name="buyDays" value="" oninput="calBuyTime()"
                                           class="form-control" id="buyDays" required="">
                                </div>
                                <div class="col-sm-6">
                                    <select id="ajax-select-buy-unit" onchange="calBuyTime()" class="selectpicker"
                                            title="选择">
                                        <option value="小时" >小时</option>
                                        <option value="日">日</option>
                                        <option value="月">月</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">起始时间：</label>

                        <div class="col-sm-8">
                            <input name="startDate" value="" class="form-control" id="startDate" readonly="readonly"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">到期时间：</label>

                        <div class="col-sm-8">
                            <input name="expireTime" value="" class="form-control" id="expireTime" readonly="" required>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="dismissDialog()">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="goRecordVps()">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="renewModal" tabindex="-1" role="dialog" aria-labelledby="renewModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="bootstrap-dialog-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="dismissDialog()"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="renewModalLabel">续费</h4>
                </div>

            </div>
            <div class="modal-body">
                <form id="renewRecordVpsFrom" class="form-horizontal" role="form" method="post">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户：</label>

                        <div class="col-sm-8">
                            <input name="renewUser" value="" class="form-control" id="renewUser" required=""
                                   readonly="readonly">
                            <input type="hidden" name="userVpsId" id="userVpsId">

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">VPS：</label>

                        <div class="col-sm-8">
                            <input name="renewVpsName" value="" class="form-control" id="renewVpsName" required=""
                                   readonly="readonly">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">购买金额：</label>

                        <div class="col-sm-8">
                            <input type="number" name="renewRmb" value="" class="form-control" id="renewRmb"
                                   required="">

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">续费：</label>

                        <div class="col-sm-8">

                            <div class="row">
                                <div class="col-sm-6">
                                    <input type="number" name="renewBuyDays" value="" oninput="renewCalBuyTime()"
                                           class="form-control" id="renewBuyDays" required="">
                                </div>
                                <div class="col-sm-6">
                                    <select id="renew-ajax-select-buy-unit" onchange="renewCalBuyTime()"
                                            class="selectpicker"
                                            title="选择">
                                        <option value="小时" selected>小时</option>
                                        <option value="日">日</option>
                                        <option value="月">月</option>
                                    </select>
                                </div>

                            </div>


                        </div>
                    </div>

                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">起始时间：</label>

                        <div class="col-sm-8">
                            <input name="renewStartDate" value="" class="form-control" id="renewStartDate"
                                   readonly="readonly"
                                   required>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="rmb" class="col-sm-3 control-label">到期时间：</label>

                        <div class="col-sm-8">
                            <input name="renewExpireTime" value="" class="form-control" id="renewExpireTime" readonly=""
                                   required>

                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="dismissDialog()">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="goRenewUserVps()">续费</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
